<template>
  <div>
    <div class="vue-share">
      <div class="picture">
        <img src="/src/assets/share/share-bg.png" class="bg">
        <img src="/src/assets/share/logo.png" class="logo">
        <img src="/src/assets/share/logo-word.png" class="logo-word">
        <img src="/src/assets/share/word-1.png" class="word-1">
        <img src="/src/assets/share/word-2.png" class="word-2">
        <img src="/src/assets/share/word-3.png" class="word-3">
        <img src="/src/assets/share/share-btn.png" class="btn">
        <div class="modal" @click="showShare"></div>
      </div>
      <!-- 分享弹层 -->
      <div class="share-alert" v-show="ifShare">
        <img src="/src/assets/share-btn.png" @click="hideShare">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Share',
    data () {
      return {
        ifShare: false
      }
    },
    methods: {
      showShare () {
        this.ifShare = true
      },
      hideShare () {
        this.ifShare = false
      }
    },
    mounted () {
      this.wechatShare({userShare: true})
    }
  }
</script>

<style lang="less">
  .vue-share {
    height: 100vh;
    overflow: hidden;
    .picture {
      position: relative;
      height: 100%;
      .bg {
        width: 100%;
        height: 100%;;
      }
      .logo {
        width: 30vw;
        height: 30vw;
        position: absolute;
        top: 12vh;
        left: 35%;
      }
      .logo-word {
        width: 24vw;
        height: auto;
        position: absolute;
        top: 32vh;
        left: 38vw;
      }
      .word-1 {
        width: 74vw;
        height: auto;
        position: absolute;
        top: 40vh;
        left: 13vw;
      }
      .word-2 {
        width: 34vw;
        height: auto;
        position: absolute;
        top: 44vh;
        left: 33vw;
      }
      .word-3 {
        width: 66vw;
        height: auto;
        position: absolute;
        top: 62vh;
        left: 17vw;
      }
      .modal {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 2;
      }
      .btn {
        width: 56vw;
        height: 24vw;
        position: absolute;
        bottom: 4vh;
        left: 22vw;
      }
    }
    .share-alert {
      position: absolute;
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
      z-index: 5;
      opacity: .7;
      background-image: url('/src/assets/share-alert.jpg');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      img {
        width: 39vw;
        height: 19vw;
        position: absolute;
        top: 40%;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }
  }
</style>